<template>
  <div class="post-container">
    <!-- 搜索栏 -->
    <div class="search-container" style="margin-bottom: 20px;">
      <el-input
        v-model="searchUsername"
        placeholder="请输入用户名进行搜索"
        style="width: 300px; margin-right: 10px;"
      />
      <el-input
        v-model="searchKey"
        placeholder="请输入关键词进行搜索"
        style="width: 300px; margin-right: 10px;"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="info" @click="handleReset">重置</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userName" label="用户名" width="180" align="center" header-align="center"></el-table-column>
      <el-table-column prop="title" label="标题" width="180" align="center" header-align="center"></el-table-column>
      <el-table-column label="封面" align="center" header-align="center" width="150">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.cover"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="summary" label="简介" align="center" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="isDisplay" label="显示" align="center" header-align="center" width="100">
        <template #default="{ row }">
          {{ row.isDisplay == 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center" header-align="center">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleView(row)">查看</el-button>
          <el-button type="warning" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        background
      />
    </div>

    <!-- 抽屉组件 -->
    <el-drawer v-model="drawerVisible" title="帖子详情" direction="rtl" size="50%" :with-header="false">
      <div class="post-detail">
        <h3 class="post-title">{{ postDetail.title }}</h3>
        <div class="post-meta">
          <span class="meta-item"><strong>作者:</strong> {{ postDetail.userName }}</span>
          <span class="meta-item"><strong>显示:</strong> {{ postDetail.isDisplay == 1 ? '是' : '否' }}</span>
        </div>
        <el-image
          v-if="postDetail.cover"
          :src="postDetail.cover"
          fit="cover"
          class="post-cover"
        />
        <div class="post-summary">
          <strong>简介:</strong>
          <p>{{ postDetail.summary }}</p>
        </div>
        <div class="post-content">
          <strong>内容:</strong>
          <div v-html="postDetail.content"></div>
        </div>
      </div>
    </el-drawer>
  </div>

  <!-- 编辑抽屉 -->
  <el-drawer v-model="editDrawerVisible" title="编辑帖子" direction="rtl" size="50%">
    <el-form :model="editForm" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="editForm.title" />
      </el-form-item>
      <el-form-item label="封面">
        <el-input v-model="editForm.cover" />
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="editForm.summary" type="textarea" />
      </el-form-item>
      <el-form-item label="内容">
        <!-- 这里可以替换为富文本编辑器 -->
        <el-input v-model="editForm.content" type="textarea" :rows="6" />
      </el-form-item>
      <el-form-item label="显示">
        <el-switch v-model="editForm.isDisplay" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="editDrawerVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getPostList, deletePost, getPostDetail, createPost } from '@/api/zhaokao/post'

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const searchUsername = ref('')
const searchKey = ref('')
const postDetail = ref({})
const drawerVisible = ref(false)
const editDrawerVisible = ref(false)
const editForm = ref({
  title: '',
  cover: '',
  summary: '',
  content: '',
  isDisplay: 0
})

// 获取帖子列表的方法，支持搜索关键字
const fetchData = async (username, keyword) => {
  try {
    const res = await getPostList({
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      username: username, // 添加用户名搜索关键字参数
      keyword: keyword   // 添加关键词搜索关键字参数
    })
    tableData.value = res.data.records
    total.value = res.data.total
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

onMounted(() => {
  fetchData() // 初始化时不带搜索关键字
})

const handleView = async (row) => {
  try {
    const res = await getPostDetail(row.id)
    postDetail.value = res.data
    drawerVisible.value = true // 显示抽屉
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

const handleEdit = async (row) => {
  try {
    const res = await getPostDetail(row.id)
    editForm.value = {
      ...res.data
    }
    editDrawerVisible.value = true
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败')
  }
}

const handleSubmit = async () => {
  try {
    await createPost(editForm.value)
    ElMessage.success('创建成功')
    editDrawerVisible.value = false
    fetchData(searchUsername.value, searchKey.value) // 刷新数据，并保留当前搜索条件
  } catch (error) {
    console.error('创建失败:', error)
    ElMessage.error('创建失败')
  }
}

const handleDelete = async (row) => {
  try {
    await deletePost(row.id)
    ElMessage.success('删除成功')
    fetchData(searchUsername.value, searchKey.value) // 删除成功后刷新数据，并保留当前搜索条件
  } catch (error) {
    console.error('删除失败:', error)
    ElMessage.error('删除失败')
  }
}

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize
  fetchData(searchUsername.value, searchKey.value) // 改变分页大小时保留当前搜索条件
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchData(searchUsername.value, searchKey.value) // 改变页码时保留当前搜索条件
}

const handleSearch = () => {
  fetchData(searchUsername.value, searchKey.value) // 调用 fetchData 并传递搜索关键字
}

const handleReset = () => {
  searchUsername.value = '' // 清空用户名搜索关键字
  searchKey.value = ''      // 清空关键词搜索关键字
  currentPage.value = 1     // 重置页码为第一页
  fetchData()               // 重新获取数据，不带搜索关键字
}
</script>

<style scoped>
.post-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.post-detail {
  padding: 20px;
}

.post-title {
  margin-bottom: 20px;
  color: #1f2d3d;
  font-size: 24px;
}

.post-meta {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f8f9;
  border-radius: 4px;
}

.meta-item {
  margin-right: 20px;
  color: #515a6e;
}

.post-cover {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.post-summary {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f8f9;
  border-radius: 4px;
  color: #515a6e;
}

.post-summary strong {
  color: #1f2d3d;
}

.post-content {
  padding: 15px;
  background-color: #f8f8f9;
  border-radius: 4px;
  line-height: 1.8;
  color: #515a6e;
}

.post-content strong {
  color: #1f2d3d;
}

.post-content >>> img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>



